import { ThemedText } from './ThemedText'
import { ThemedView } from './ThemedView'
import { TouchableOpacity } from 'react-native'
import { useNavigation } from '@react-navigation/native'
import AntDesign from '@expo/vector-icons/AntDesign'
import useResponsive from '@/rem/rem'

const Navbar = ({ title }) => {
  const navigation = useNavigation()
  const { h } = useResponsive()
  return (
    <ThemedView>
      <ThemedView
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          padding: 10,
          borderBottomWidth: 1,
          borderColor: 'gray',
        }}
      >
        <TouchableOpacity
          style={{ marginRight: 10 }}
          onPress={() => navigation.goBack()}
        >
          <ThemedText style={{ fontSize: 24, fontWeight: 'bold' }}>
            <AntDesign name="left" size={24} color="black" />
          </ThemedText>
        </TouchableOpacity>
        <ThemedText style={{ fontSize: 20, fontWeight: 'bold' }}>
          {title}
        </ThemedText>
      </ThemedView>
    </ThemedView>
  )
}
export default Navbar
